import React from "react";
import { Form, Input, Button, message } from 'antd'
import { register } from '@/api/login/index'
import PropTypes from 'prop-types';



const Index = (props) => {

  const { toLogin } = props


  const [form] = Form.useForm();

  const onRegister = async () => {
    try {
      const values = await form.validateFields();
      const res = await register({
        account: values.account,
        password: values.password,
      });
      if (res.status === 0) {
        message.success('注册成功');
        toLogin()
      }
    } catch (error) {
      console.error(error);
    }
  }
  return (
    <Form
      name="basic"
      form={form}
      labelCol={{ span: 5 }}
      wrapperCol={{ span: 17 }}
      style={{ maxWidth: 600 }}
    >
      <Form.Item
        label="账号"
        name="account"
        rules={[{ required: true, message: '请输入账号' },]}
      >
        <Input placeholder="账号长度6-12位" />
      </Form.Item>
      <Form.Item
        label="密码"
        name="password"
        rules={[{ required: true, message: '请输入密码' },]}
      >
        <Input.Password placeholder="密码长度需6-12位，含字母和数字" />
      </Form.Item>
      <Form.Item
        wrapperCol={{ span: 24 }}
      >
        <Button className="register-btn" type="primary" onClick={onRegister}>
          注册
        </Button>
      </Form.Item>
    </Form>
  )
}

Index.propTypes = {
  toLogin: PropTypes.func.isRequired,
};

export default Index
